<template>
	<view class="drug-info">
		<view v-if="obj.id">
			<lj-top-tip :showIcon="false" type="info" v-if="obj.status=='normal'">审核中</lj-top-tip>
			<lj-top-tip :showIcon="false" type="danger" v-else-if="obj.status=='reject'">未通过</lj-top-tip>
			<lj-top-tip :showIcon="false" type="danger" v-else-if="obj.status=='hidden'">已取消</lj-top-tip>
			<lj-top-tip type="info" v-else-if="obj.pay_status==2">请在15分钟内完成支付，超时订单将取消</lj-top-tip>

			<block v-if="obj.status=='yes'">
				<lj-top-tip :showIcon="false" type="success2" v-if="obj.pay_status==1">
					<block v-if="obj.shipping_type==2">到店自提</block>
					<block v-else>
						订单{{obj.typename}}-快递发货
					</block>
				</lj-top-tip>
				<view class="send-method" v-if="obj.pay_status==1">
					<view v-show="obj.shipping_type==1">
						<view class="row u-flex">
							<view class="label">收货人</view>
							<view>
								{{obj.address_user_name?obj.address_user_name:'--'}}
								<text style="margin-left:58rpx;" v-if="obj.address_user_phone">{{obj.address_user_phone}}</text>
							</view>
						</view>
						<view class="row u-flex">
							<view class="label">收货地址</view>
							<view class="u-flex u-flex-1" @click="goNext('/pagesA/my/address?type=confirm')">
								<view class="u-flex-1 u-line-1">
									<block v-if="obj.address_user_addr">{{obj.address_user_addr}}</block>
									<view v-else style="color: #666">--</view>
								</view>
							</view>
						</view>
					</view>
					<view v-show="obj.shipping_type==2">
						<view class="row u-flex">
							<view class="label">门店</view>
							<view>
								{{obj.business_info&&obj.business_info.name?obj.business_info.name:'--'}}
								<text style="margin-left:58rpx;" v-if="obj.business_info&&obj.business_info.name">{{obj.business_info.telephone}}</text>
							</view>
						</view>
						<view class="row u-flex">
							<view class="label">门店地址</view>
							<view class="u-flex u-flex-1" @click="goNav">
								<view class="u-flex-1 u-line-1">
									{{obj.business_info&&obj.business_info.address?obj.business_info.address:'--'}}
								</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="send-method" v-else-if="obj.status!='hidden'&&obj.pay_status==2">
					<view class="row u-flex" style="margin-bottom: 10rpx;">
						<view class="label" style="font-size: 26rpx;color: #666666">发货方式</view>
						<view class="radiobox u-flex">
							<view class="item u-flex u-flex-y-center" @click="sendMethod=1">
								<image :src="'/static/lj/drug/radio'+(sendMethod==1?'-c':'')+'.png'" mode=""></image>
								<view>快递发货</view>
							</view>
							<view class="item u-flex u-flex-y-center" @click="sendMethod=2">
								<image :src="'/static/lj/drug/radio'+(sendMethod==2?'-c':'')+'.png'" mode=""></image>
								<view>到店自提</view>
							</view>
						</view>
					</view>
					<view v-show="sendMethod==1">
						<view class="row u-flex">
							<view class="label">收货人</view>
							<view>
								{{addressobj&&addressobj.name?addressobj.name:'--'}}
								<text style="margin-left:58rpx;" v-if="addressobj">{{addressobj.phone}}</text>
							</view>
						</view>
						<view class="row u-flex">
							<view class="label">收货地址</view>
							<view class="u-flex u-flex-1" @click="goNext('/pagesA/my/address?type=confirm')">
								<view class="u-flex-1 u-line-1">
									<block v-if="addressobj && addressobj.province_name">
										{{addressobj.province_name}}
										{{addressobj.city_name}}
										{{addressobj.region_name}}
										{{addressobj.detail}}
									</block>
									<view v-else style="color: #666">请选择收货地址</view>
								</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
					<view v-show="sendMethod==2">
						<view class="row u-flex">
							<view class="label">门店</view>
							<view>
								{{obj.business_info&&obj.business_info.name?obj.business_info.name:'--'}}
								<text style="margin-left:58rpx;" v-if="obj.business_info&&obj.business_info.name">{{obj.business_info.telephone}}</text>
							</view>
						</view>
						<view class="row u-flex">
							<view class="label">门店地址</view>
							<view class="u-flex u-flex-1" @click="goNav">
								<view class="u-flex-1 u-line-1">
									{{obj.business_info&&obj.business_info.address?obj.business_info.address:'--'}}
								</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
				</view>

				<view class="verify_code" v-if="obj.pay_status==1 && obj.shipping_type==2">
					<view>取件码：{{obj.verify_code}}</view>
					<image :src="$base.img(obj.verify_qrcode)" mode="aspectFill"></image>
				</view>
			</block>

			<!-- 订单信息 -->
			<view class="goods_info">
				<view class="head">{{obj.business_info&&obj.business_info.name?obj.business_info.name:'--'}}</view>
				<view class="outer">
					<view class="item u-flex" v-for="(item,index) in obj.goods_list" :key="index">
						<view class="pic">
							<image :src="$base.cdn(item.goods_img)" mode="aspectFill"></image>
						</view>
						<view class="con u-flex-1">
							<view class="u-flex u-flex-between">
								<view class="tit">
									{{item.goods_name}}
									<text>{{item.spec_name}}</text>
								</view>
								<view class="price">￥{{item.goods_price}}x{{item.number}}</view>
							</view>
							<view class="scon">
								用法用量：{{item.frequencys}}，{{item.consumptions}}，{{item.usages}}
							</view>
							<view class="scon">
								备注：{{item.remark||'--'}}
							</view>
						</view>
					</view>
				</view>
				<view class="foot">
					<view class="row u-flex u-flex-between">
						<view>药品金额：</view>
						<view>￥{{goods_price}}</view>
					</view>
					<view class="row u-flex u-flex-between">
						<view>运费：</view>
						<view>
							<block v-if="(obj.pay_status==2?obj.express_price:express_price)<=0">包邮</block>
							<block v-else>￥{{obj.pay_status==2?obj.express_price:express_price}}</block>
						</view>
					</view>
					<view class="row u-flex u-flex-between">
						<view>优惠券：</view>
						<view class="u-flex" v-if="obj.pay_status==1">
							<view class="u-flex">
								<view class="price">-￥{{obj.coupon_price}}</view>
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<block v-else>
							<view class="u-flex" v-if="couponobj.id">
								<view class="u-flex" style="margin-right: 10rpx;" @click="gotoSelectCoupon">
									<!-- <view>{{couponobj.title}}</view> -->
									<view class="price">-￥{{couponobj.value}}</view>
								</view>
								<u-icon name="close" @click="unCoupon"></u-icon>
							</view>
							<view class="u-flex" v-else @click="gotoSelectCoupon">
								<view>{{((parseFloat(goods_price || 0) + parseFloat(express_price || 0))<=0||couponnum<=0)?'暂无可用':'选择'}}</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</block>
					</view>
					<view class="hj u-flex u-flex-end u-flex-y-center">
						<view>实付款：</view>
						<view class="price">￥{{obj.pay_status==1?obj.pay_price:totalPrice}}</view>
					</view>
				</view>
			</view>

			<view class="order_info2">
				<view class="row u-flex u-flex-between">
					<view>订单编号：{{obj.order_code}}</view>
					<view class="copy-btn" @click="Oncopy(obj.order_code)">复制</view>
				</view>
				<view class="row u-flex u-flex-between">
					<view>创建时间：{{$u.timeFormat(obj.createtime,'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<block v-if="obj.pay_status==1">
					<view class="row u-flex u-flex-between">
						<view>支付时间：{{$u.timeFormat(obj.pay_time,'yyyy-mm-dd hh:MM:ss')}}</view>
					</view>
					<view class="row u-flex u-flex-between">
						<view>支付方式：微信</view>
					</view>
				</block>
				<!-- <view class="row u-flex u-flex-between" v-if="obj.express_time">
					<view>发货时间：{{$u.timeFormat(obj.express_time,'yyyy-mm-dd hh:MM:ss')}}</view>
				</view> -->
			</view>

			<view class="footer u-flex u-flex-end" v-if="(obj.pay_status==2 && obj.order_status == 10)||(obj.pay_status==1 && obj.order_status == 20)">
				<block v-if="obj.pay_status==2 && obj.order_status == 10">
					<view class="btn-fillet-o" @click="Oncancel">取消订单</view>
					<view class="btn-fillet" v-if="obj.status=='yes'" @click="openPayPopup">去支付</view>
				</block>

				<block v-if="obj.pay_status==1 && obj.order_status == 20">
					<view class="btn-fillet" v-if="obj.shipping_type==1" @click="goNext('/pagesA/common/driver/driver?id='+obj.id)">查看物流</view>

					<view class="btn-fillet" @click="Ontrue">确认收货</view>
				</block>

			</view>
			<view style="height: 160rpx;" v-if="obj.pay_status==2||(obj.pay_status==1 && obj.order_status == 20)"></view>
		</view>
		<view v-else-if="!loading">
			<lj-empty paddingTop="80rpx">暂无订单详情</lj-empty>
		</view>

		<u-popup :show="show" mode="bottom">
			<view class="popup-pay-mode">
				<view class="popup-head">
					请选择支付方式
					<image class="close" src="/static/lj/drug/icon_close.png" mode="aspectFill" @click="show=false"></image>
				</view>
				<view class="popup-content">
					<!-- <view class="item u-flex u-flex-between u-flex-y-center">
						<view class="u-flex u-flex-y-center">
							<image class="icon" src="/static/lj/drug/icon_alipay.png" mode="aspectFill"></image>
							<view>支付宝</view>
						</view>
						<image class="ricon" src="/static/lj/drug/hook.png" mode="aspectFill"></image>
					</view> -->
					<view class="item u-flex u-flex-between u-flex-y-center">
						<view class="u-flex u-flex-y-center">
							<image class="icon" src="/static/lj/drug/icon_wechat.png" mode="aspectFill"></image>
							<view>微信</view>
						</view>
						<image class="ricon" src="/static/lj/drug/hook.png" mode="aspectFill"></image>
					</view>

					<view class="btn-capsule" @click="OnSubmit">确定支付</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				eventChannel: null,
				
				imgFullUrl: this.$store.state.http_img, //图片地址
				id: null, //ID
				bool: false,
				obj: {}, //数据
				prop: {},
				wxcode: '', //二维码
				imglist: [], //图片
				
				loading: true,

				show: false,
				express_price: 0,
				goods_price: 0,
				totalPrice: 0,
				addressobj: {},
				couponobj: {}, //选中优惠券
				couponnum: 0, //可用优惠券数量
				sendMethod: 1,
			}
		},
		onLoad: function(options) {
			this.eventChannel = this.getOpenerEventChannel();
			
			this.id = options.id
			this.OnOrder()
			this.$Http({
				url: 'getOneAddress',
			}).then(res => {
				if (res.code == 1) {
					this.addressobj = res.data
				}
			})

			// 开启监听选择收货地址事件，如果有值就关闭默认地址
			uni.$on('choosePath', (res) => {
				this.addressobj = res
			})
		},
		onUnload() {
			// 关闭监听选择收货地址事件
			uni.$off('choosePath')
			this.$store.commit('selectCouponobj', {})
		},
		onShow(){
			this.couponobj = this.$store.state.couponobj

			this.computedTotalPrice()
		},
		methods: {
			computedTotalPrice(){
				var totalPrice = 0;
				var price = parseFloat(this.goods_price || 0) + parseFloat(this.express_price || 0);
				if(this.couponobj.least && this.couponobj.least>price){
					this.$store.commit('selectCouponobj', {})
					this.couponobj = {}
				}
				this.$Http({
					url: 'getCouponSelectCount',
					data: {
						type: 2,
						price: price,
					},
					load: false,
				}).then(res=>{
					if(res.code == 1) this.couponnum = res.data;
				});

				totalPrice += price;

				if(this.couponobj.id) totalPrice -= parseFloat(this.couponobj.value || 0);
				if(totalPrice<0) totalPrice = 0;

				this.totalPrice = totalPrice.toFixed(2)
			},
			
			// 取消优惠券
			unCoupon(){
				this.$store.commit('selectCouponobj', {})
				this.couponobj = this.$store.state.couponobj
				this.computedTotalPrice()
			},
			
			gotoSelectCoupon(){
				if(this.obj.status!='yes') return;

				var price = parseFloat(this.goods_price || 0) + parseFloat(this.express_price || 0);
				if(price<=0) return;

				uni.navigateTo({
					url: '/pagesL/my/couponSelect?type=2&price='+price
				})
			},

			//详情1
			OnOrder() {
				this.$Http({
					url: 'mydetailsPrescription',
					data: {
						doctor_prescription_id: this.id
					},
				}).then(res => {
					this.loading = false
					if (res.code == 1) {
						//未支付
						if (res.data.pay_status == 2) {
							if (res.data.order_status == 10) {
								res.data.typename = '待支付'
							}
						}

						//已支付
						if (res.data.pay_status == 1) {
							//订单状态10-进行中
							if (res.data.order_status == 10) {
								res.data.typename = '待发货'
							}
							//已发货
							if (res.data.order_status == 20) {
								res.data.typename = '已发货'
							}
							//已完成
							if (res.data.order_status == 30) {
								res.data.typename = '已完成'
							}
						}
						// res.data.createtime = this.$base.formatTime(new Date(res.data.createtime *
						// 	1000), "yyyy/MM/dd hh:mm:ss")
						if (res.data.images[0] == "") {
							this.imglist = []
						} else {
							res.data.images.forEach(item => {
								if (item != "") {
									this.imglist.push(item)
								}
							})
							// this.imglist = res.data.images
						}
						this.obj = res.data

						var goods_price = 0
						for(var i in this.obj.goods_list){
							goods_price += parseFloat(this.obj.goods_list[i].all_price)
						}
						this.goods_price = goods_price

						this.computedTotalPrice()
					}
				});
			},
			//跳转
			goNext(url) {
				uni.navigateTo({
					url: url
				});
			},
			Oncopy(str){
				uni.setClipboardData({
					data: str,
					success: () => {
						uni.showToast({
							title: "复制成功",
							icon: 'none'
						})
					}
				});
			},
			goNav(){
				if(!this.obj.business_info || !this.obj.business_info.lat || !this.obj.business_info.lng) return false

				uni.openLocation({
					latitude: parseFloat(this.obj.business_info.lat),
					longitude: parseFloat(this.obj.business_info.lng),
					success: function (e) {
						console.log('goNav success', e);
					},
					fail: function (e) {
						console.log('goNav fail', e);
					},
				})
			},
			// 取消订单
			Oncancel() {
				let that = this
				uni.showModal({
					title: '操作提示',
					confirmText: '确定',
					confirmColor: '#6ccbb6',
					cancelText: '取消',
					content: '您确定要取消吗',
					success: function(res) {
						if (res.confirm) {
							that.$Http({
								url: 'cancelPrescription',
								show: true,
								data: {
									doctor_prescription_id: that.id
								},
								type: 'post',
							}).then(res => {
								if (res.code == 1) {
									that.OnOrder()
									that.$forceUpdate();
									that.eventChannel.emit('changeStatusEvent', {data: 'oncutRefresh'});
								}
							});
						}
					}
				});
			},
			// 确认收货 退款
			Ontrue() {
				let that = this
				uni.showModal({
					title: '操作提示',
					confirmText: '确定',
					confirmColor: '#6ccbb6',
					cancelText: '取消',
					content: '您确定要收货吗',
					success: function(res) {
						if (res.confirm) {
							that.$Http({
								url: 'receivingPrescription',
								show: true,
								data: {
									doctor_prescription_id: that.id
								},
								type: 'post',
							}).then(res => {
								if (res.code == 1) {
									that.OnOrder()
									that.$forceUpdate();
									that.eventChannel.emit('changeStatusEvent', {data: 'oncutRefresh'});
								}
							});
						}
					}
				});
			},
			//订单详情
			Oninfo(e) {
				uni.navigateTo({
					url: '/pagesA/shop/order/info?id=' + e,
				});
			},
			//放大图片
			Onbanner(e) {
				uni.previewImage({
					current: e, //预览图片的下标
					urls: this.imglist //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},

			openPayPopup(){
				if(this.sendMethod==1){
					if (!this.addressobj || !this.addressobj.address_id) {
						uni.showToast({
							icon: 'none',
							duration: 2000,
							title: '请先添加收货地址'
						});
						return
					}
				}

				this.show = true
			},
			//提交
			OnSubmit() {
				this.show = false
				var that=this, address_id = 0

				if(this.sendMethod==1){
					if (!this.addressobj || !this.addressobj.address_id) {
						uni.showToast({
							icon: 'none',
							duration: 2000,
							title: '请先添加收货地址'
						});
						return
					}

					address_id = this.addressobj&&this.addressobj.address_id?this.addressobj.address_id:0
				}

				this.$Http({
					url: 'payPrescription',
					data: {
						doctor_prescription_id: this.id,
						address_id: address_id,
						coupon_id: this.couponobj.id||0,
						sendMethod: this.sendMethod
					},
					type: 'POST',
					show:true,
				}).then(res => {
					if (res.code == 1) {
						if(res.msg=='paySuccess'){
							that.OnOrder()
							that.eventChannel.emit('changeStatusEvent', {data: 'oncutRefresh'});
						}
						else that.Onpay(res.data)
					}
				});
				// console.log(data, '查看')
			},
			//支付
			Onpay(e) {
				var that = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: e.timeStamp,
					nonceStr: e.nonceStr,
					package: e.pacKage,
					signType: e.signType,
					paySign: e.paySign,
					success: function(res) {
						//去列表
						uni.redirectTo({
							url: '/pagesA/drug/list',
						})
					},
					fail: function(err) {
						uni.showModal({
							title: '支付提示',
							content: '支付失败,请联系客服人员!',
							confirmText: '我知道了',
							confirmColor: '#6ccbb6',
							showCancel: false,
							success(res) {
								if (res.confirm) {
									// uni.redirectTo({
									// 	url: '/pagesA/drug/list',
									// })
									that.OnOrder()
									that.eventChannel.emit('changeStatusEvent', {data: 'oncutRefresh'});
								}
							}
						})
					}
				});

			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
	page{
		height: 100%;
		background-color: #f6f6f6;
	}

	// 圆角按钮
	.btn-fillet,.btn-fillet-o{
		width: 206rpx;
		height: 70rpx;
		line-height: 66rpx;
		text-align: center;
		font-size: 26rpx;
		color: #65d8f2;
		border-radius: 10rpx;
		border: 2rpx solid #65d8f2;
		margin-left: 58rpx;
	}
	.btn-fillet{
		background-color: #12b3f1;
		box-shadow: 0 6rpx 6rpx #ace0f3;
		color: #fff;
		border-color: #12b3f1;
	}
</style>
